<template>
    <div class="register">
        <div class="register-box">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="姓名">
                    <el-input v-model="form.name" @mouseleave="hint"></el-input>
                    <el-alert
                       title="错误提示的文案"
                       type="error" v-show="visible1">
                    </el-alert>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model="form.account"></el-input>
                    <el-alert
                       title="错误提示的文案"
                       type="error" v-show="visible">
                    </el-alert>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.phone"></el-input>
                    <el-alert
                       title="错误提示的文案"
                       type="error" v-show="visible">
                    </el-alert>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="form.password"></el-input>
                    <el-alert
                       title="错误提示的文案"
                       type="error" v-show="visible">
                    </el-alert>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>



<script>
import { alertProps } from 'element-plus';
export default {
    data() {
        return {
            form: {
                name: '',
                account: '',
                phone: '',
                password: '',
            },
            visible: false,
            visible1: false,
        }
    },
    methods: {


        hint(){
            console.log("a")
            console.log(this.form.name)
            if(this.form.name==null || this.form.name==''){
                this.visible1=true
            }else{
                this.visible1=false
            }
        },


        onSubmit() {
            var params = {
                name: this.form.name,
                account: this.form.account,
                phone: this.form.phone,
                password: this.form.password
            }
            this.axios.get('http://127.0.0.1:9090/user/selectAll'+'?account='+this.form.account).then((result) => {
                console.log(result.data.data.total)
                console.log(result.data.data)
                if (result.data.data.total != 0) {
                    alert("账号已存在")
                } else {
                    this.axios.post('http://127.0.0.1:9090/user/insert', params).then((result) => {
                        this.$router.replace('/register')
                    }).catch((err) => {
                        alert("注册失败")
                    });

                }

            }).catch((err) => {

            })

        }
    }
}
</script>


<style scoped>
.register {
    background-color: #2b4b6b;
    height: 100%;
}

.register-box {
    padding: 10px;
    margin: 10px;
    width: 500px;
    height: 650px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>